/* 导航栏 start */
.navbar {
  position: relative;
  width: 100%;
  padding: 0rpx 30rpx;
  display: flex;
  
  .search-operation {
    flex-grow: 0;
    flex-shrink: 0;
    font-size: 40rpx;
    padding-top: 18rpx;
  }

  .tabs {
    flex: 0.5;
    margin: 0 auto;
    padding-top: 4rpx;
  }
}
/* 导航栏 end */

.nav-title {
  width: 100%;
  margin: 30rpx 0;
  display: flex;
  padding: 0 30rpx;
  align-items: center;
  .left {
	  flex: 1;
	  align-items: center;
  }
  
  .right {
	  flex-grow: 0;
	  flex-shrink: 0;
	  font-size: 26rpx;
	  color: var(--tn-color-gray-dark);
  }
}
  

/* 页面 start */
.page {
  position: relative;
  width: 100%;
  
  .page-container {
    position: relative;
    width: 100%;
    
    .page-scroll {
      position: relative;
      width: 100%;
      padding-bottom: 100rpx;
      
      &.active {
        display: block;
      }


      /* 可能认识的人 start */
      .interested-users {
        width: 100%;
        height: 60rpx;
        border-radius: 15rpx;
        position: relative;
        z-index: 1;
        .interested-title {
          position: absolute;
          font-size: 30rpx;
        }
        .interested-more {
          margin: 30rpx 20rpx 0 0
        }
      }
      /* 头像 */
      .interested-item-container {
        padding: 30rpx 0;
        position: relative;
        width: fit-content;
        display: flex;
        flex-wrap: nowrap;
        .scroll-item {
          flex-grow: 1;
          flex-shrink: 0;
          margin: 0rpx 20rpx;
          .image-piccapsule2{
            background-size: cover;
            background-repeat:no-repeat;
            // background-attachment:fixed;
            background-position:top;
            border-radius: 50%;
            width: 100rpx;
            height: 100rpx;
            .image-capsule2{
              // padding: 102rpx 0rpx;
              position: relative;
            }
          }
          .title {
            width: 100rpx;
            height: 40rpx;
            line-height: 40rpx;
            text-align: center;
            margin-top: 10rpx;
            font-size: 22rpx;
            // overflow: hidden; /* 隐藏溢出的内容 */
          }
        }
      }
      /* 可能认识的人 end */

      /* 我的圈子列表 start */
      .circles-list-title {
        padding: 30rpx 30rpx 10rpx;
      }
      .circles-list-container {
        padding: 0rpx 0rpx 30rpx 30rpx;
        position: relative;
        width: fit-content;
        display: flex;
        flex-wrap: nowrap;
        .scroll-item {
          flex-grow: 1;
          flex-shrink: 0;
          margin: 30rpx 30rpx 6rpx 0;
          .icon {
            width: 100rpx;
            height: 100rpx;
            border-radius: 15rpx;
          }
          .item-icon {
            width: 100rpx;
            height: 100rpx;
            border-radius: 15rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
            font-size: 70rpx;
          }
          .circles-title {
            width: 100rpx;
            height: 1rem;
            margin-top: 15rpx;
            font-size: 23rpx;
            justify-content: center;
            text-align: center;
            overflow: hidden; /* 隐藏溢出的内容 */  
          }
        }
      }
      // 我的圈子列表 end

      // 推荐话题 end
      .recommend-topic {
        padding: 0rpx 30rpx 20rpx;
        // margin-top: 60rpx;
        .topic-list {
          margin-top: 30rpx;
          // padding: 16rpx 0;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          .list-item {
            width: calc(100% / 2 - 15rpx);
            display: flex;
            align-items: center;
            padding: 16rpx 0;
            border-radius: 6rpx;
            .item-content {
              display: flex;
              align-items: center;
              justify-content: space-between;
              .title {
                font-size: 26rpx;
                font-weight: bold;
                margin-bottom: 6rpx;
              }
              .list-info {
                display: flex;
                align-items: center;
                width: 100%;
                .icon {
                  width: 60rpx;
                  height: 26rpx;
                  color: #ffa929;
                  font-size: 78rpx;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                }
              }
            }
          }
        }
      }
      // 推荐话题 end
    }
  }
}
.publish {
  padding: 20rpx 30rpx;
  .publish-list {
    margin: 20rpx 0;
    .list-item {
      padding: 20rpx 30rpx;
      border-radius: 8rpx;
      margin-top: 30rpx;
      border-radius: 20rpx;
      .list-info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .image {
          width: 80rpx;
          height: 80rpx;
        }
        .title-desc {
          margin-left: 20rpx;
          flex: 1;
          .title {
            font-size: 28rpx;
            font-weight: bold;
          }
          .item-desc {
            font-size: 24rpx;
            margin-top: 10rpx;
            color: var(--tn-color-gray-dark);
          }
        }
      }
    }
  }
}
/* 页面 end */
